<script setup>
import { ref } from 'vue'
const { safeAreaInsets } = uni.getWindowInfo()

const cardCur = ref(0)
const cardCur2 = ref(0)
const swiperList = [
	{
		id: 0,
		type: 'image',
		color: '#FFB053',
		title: 'Frontend 2023',
		name: '与你一起 · 简单生活',
		url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1676011029131-assets/web-upload/62aadd95-d6db-4d7a-9fe7-ae615130e4ea.jpeg',
		pngurl: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1675941765043-assets/web-upload/a065231c-14c4-4c4d-ae40-5d39e9bc0725.png'
		}, {
		id: 1,
		type: 'image',
		color: '#53FFB1',
		title: 'Design 2023',
		name: '与你一起 · 创意生活',
		url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1676011496571-assets/web-upload/debcf577-e9ca-4ab0-b993-5b4bb2647d36.jpeg',
		pngurl: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1676011349283-assets/web-upload/ad460966-b629-4374-ac0c-6059ed8c5668.png'
		}, {
		id: 2,
		type: 'image',
		color: '#FF6253',
		title: 'Hotspot 2023',
		name: '与你一起 · 舒适生活',
		url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1676011893050-assets/web-upload/f427620a-8c6a-4b99-98e5-94066f54db9d.jpeg',
		pngurl: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1676011789258-assets/web-upload/87c66663-1eac-4fed-8783-5fe2c7c20e2d.png'
	}, {
		id: 3,
		type: 'image',
		color: '#79A4D9',
		title: 'Interview 2023',
		name: '与你一起 · 悦享生活',
		url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1676012700829-assets/web-upload/fd154748-a5d2-4005-9470-f384f38a00e9.jpeg',
		pngurl: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1676012711907-assets/web-upload/e9e5cf10-33cc-40f1-ae69-b39df9ba4565.png'
	}
]

const resumeList = [{
	id: 0,
	type: 'image',
	title: '徐圆圆',
	name: 'UI设计师',
	hot: '1.29W',
	share: '216',
	love: '962',
	avatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
	url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
}, {
	id: 1,
	type: 'image',
	title: '图鸟北北',
	name: 'UI设计师',
	hot: '964',
	share: '94',
	love: '186',
	avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
	url: 'https://resource.tuniaokj.com/images/resume/resume-bg2.jpg',
}, {
	id: 2,
	type: 'image',
	title: '图鸟西西',
	name: '高级前端',
	hot: '3.26K',
	share: '146',
	love: '379',
	avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
	url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
}, {
	id: 3,
	type: 'image',
	title: '图鸟南南',
	name: '项目经理',
	hot: '6.32K',
	share: '133',
	love: '432',
	avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
	url: 'https://resource.tuniaokj.com/images/resume/resume-bg2.jpg',
}, {
	id: 4,
	type: 'image',
	title: '图鸟猪猪',
	name: '纯打杂',
	hot: '8.65K',
	share: '321',
	love: '886',
	avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
	url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
}]

const cardSwiper = (e) => {
	cardCur.value = e.detail.current
}

const resume = (e) => {
	cardCur2.value = e.detail.current
}
</script>

<template>
	<view class="viewport">
		<xb-nav-bar>
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @click="tn()">
			  <!-- 图标logo -->
			  <view class="custom-nav__back" @click="tn('/pageA/about/about')">
			    <view class="logo-pic png-sussuspension1" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1679989824360-assets/web-upload/d6f05bc7-7e47-4566-98fc-494350f4f5d2.png')">
			      <view class="logo-image ">
			      </view>
			    </view> 
			    <!-- <view class="tn-icon-left"></view> -->
			  </view>
			</view>
		</xb-nav-bar>
		
		<view class="tn-margin-top" :style="{paddingTop: 91 + 'px'}">
			<swiper class="card-swiper" :circular="true"
			  :autoplay="true" duration="500" interval="18000" @change="cardSwiper"> 
			  <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur == index ? 'cur' : ''">
			    <!-- <view class="swiper-item image-banner tn-shadow-blur" :style="'background-image:url('+ item.url + ');'">
			    </view> -->
			    <view class="swiper-item image-banner">
			      <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
			    </view>
			    <view class="swiper-item2 image-banner">
			      <image class="png-sussuspension" :src="item.pngurl" mode="heightFix" v-if="item.type=='image'"></image>
			    </view>
			    <view class="swiper-item-text">
			      <view class="text-sussuspension">
			        <view class="tn-text-bold tn-color-black" style="font-size: 45rpx;">{{item.title}}</view>
			        <view class="tn-color-black tn-padding-top-xs" style="font-size: 35rpx;">{{item.name}}</view>
			      </view>
			    </view>
			  </swiper-item>
			</swiper>
			<view class="indication">
			    <block v-for="(item,index) in swiperList" :key="index">
			      <view class="spot" :class="cardCur==index?'active':'tn-bg-black'" :style="'background-color: '+ item.color +''"></view>
			    </block>
			</view>
			
			<!-- 方式12 start-->
			<view class="tn-flex tn-margin-xs tn-padding-top-sm">
			  <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/homePages/hot')">
			    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			      <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purplered--light tn-color-purplered">
			        <view class="tn-icon-fire-fill"></view>
			      </view>  
			      <view class="tn-color-black tn-text-center">
			        <text class="tn-text-ellipsis">热点推荐</text>
			      </view>
			    </view>
			  </view>
			  <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/preferredPages/classify')">
			    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			      <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-indigo--light tn-color-indigo">
			        <view class="tn-icon-flower-fill"></view>
			      </view>  
			      <view class="tn-color-black tn-text-center">
			        <text class="tn-text-ellipsis">源码分类</text>
			      </view>
			    </view>
			  </view>
			  <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/circlePages/business')">
			    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			      <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purple--light tn-color-purple">
			        <view class="tn-icon-identity-fill"></view>
			      </view>  
			      <view class="tn-color-black tn-text-center">
			        <text class="tn-text-ellipsis">效卫名片</text>
			      </view>
			    </view>
			  </view>
			  <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/preferredPages/website')">
			    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			      <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-orange--light tn-color-orange">
			        <view class="tn-icon-star-fill"></view>
			      </view>  
			      <view class="tn-color-black tn-text-center">
			        <text class="tn-text-ellipsis">星选门户</text>
			      </view>
			    </view>
			  </view>
			</view>
			<!-- 方式12 end-->
			

			
			<view class="tn-flex tn-flex-row-between" @click="tn('/circlePages/business')">
			  <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
			    推荐名片
			  </view>
			  <view class="justify-content-item tn-margin tn-text-lg tn-color-grey">
			    <text class="tn-padding-xs">全部</text>
			    <text class="tn-icon-topics"></text>
			  </view>
			</view>
			
			<swiper class="card-swiper2 tn-margin-top-sm" :circular="true"
			  :autoplay="false" duration="500" interval="5000" @change="resume"> 
			  <swiper-item v-for="(item,index) in resumeList" :key="index" :class="cardCur2==index?'cur':''" @click="tn('/circlePages/king')">
			    <!-- <view class="swiper-item image-banner">
			      <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
			    </view> -->
			    <view class="swiper-item1 image-banner tn-shadow-blur" :style="'background-image:url('+ item.url + ');width: 660rpx;height: 100%;background-size: cover;border-radius: 15rpx;'">
			    </view>
			    <view class="swiper-item2 image-banner tn-shadow-blur" :style="'background-image:url('+ item.avatar +');width: 120rpx;height: 120rpx;background-size: cover;'">
			    </view> 
			    <view class="swiper-item-text tn-text-shadow-indigo">
			      <view class="tn-text-bold tn-color-blue--dark" style="font-size: 45rpx;">{{item.title}}</view>
			      <view class="tn-color-blue--dark tn-padding-top-sm">{{item.name}}</view>
			      <view class="tn-flex tn-padding-top-xl" style="margin-left: -50rpx;">
			        <view class="tn-flex-1 tn-padding-sm tn-margin-right">
			          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			            <view class="">
			              <view class="tn-text-xxl tn-color-blue">{{item.hot}}</view>
			            </view>
			            <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
			              <text class="tn-icon-fire"></text>
			              <text class="tn-padding-left-xs">人气</text>
			            </view>
			          </view>
			        </view>
			        <view class="tn-flex-1 tn-padding-sm tn-margin-left tn-margin-right">
			          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			            <view class="">
			              <view class="tn-text-xxl tn-color-orange">{{item.share}}</view>
			            </view>
			            <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
			              <text class="tn-icon-share-circle"></text>
			              <text class="tn-padding-left-xs">分享</text>
			            </view>
			          </view>
			        </view>
			        <view class="tn-flex-1 tn-padding-sm tn-margin-left">
			          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			            <view class="">
			              <view class="tn-text-xxl tn-color-red">{{item.love}}</view>
			            </view>
			            <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
			              <text class="tn-icon-like"></text>
			              <text class="tn-padding-left-xs">爱心</text>
			            </view>
			          </view>
			        </view>
			      </view>
			    </view>
			  </swiper-item>
			</swiper>
			
			<view class="">
			  <view class="tn-flex tn-flex-row-between" @click="tn('/activityPages/project')">
			    <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
			      热门项目
			    </view>
			    <view class="justify-content-item tn-margin tn-text-lg tn-color-grey">
			      <text class="tn-padding-xs">全部</text>
			      <text class="tn-icon-topics"></text>
			    </view>
			  </view>
			  
			  <view class="tn-flex tn-margin-left tn-margin-right tn-margin-top-sm" @click="tn('/circlePages/news')">
			    <view class="tn-flex-2">
			      <view class="image-pic tn-margin-right tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/content/rodion.jpg')">
			        <view class="image-tuniao1">
			        </view>
			      </view> 
			    </view>
			    <view class="tn-flex-1">
			      <view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
			        <view class="image-tuniao2">
			        </view>
			      </view> 
			      <view class="image-pic tn-margin-top tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/shop/banner1.jpg')">
			        <view class="image-tuniao2">
			        </view>
			      </view> 
			    </view>
			  </view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.viewport {
	  width: 100%;
	  height: 100%;
	  position: relative;
	  // background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
	}
	
	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	  height: calc(140rpx + constant(safe-area-inset-bottom));
	}
	
	
	/* 底部tabbar假阴影 start*/
	.bg-tabbar-shadow{
	  // background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, rgba(255,255,255,0) , rgba(255,255,255,0));
	  box-shadow: 0rpx 0rpx 400rpx 0rpx rgba(0, 0, 0, 0.25);
	  position: fixed;
	  bottom: calc(0rpx + env(safe-area-inset-bottom) / 2);
	  bottom: calc(0rpx + constant(safe-area-inset-bottom));
	  height: 60rpx;
	  width: 100vw;
	  z-index: 0;
	}
	
	.tn-three{
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}
	.icon12 {
	  &__item {
	    width: 30%;
	    background-color: #FFFFFF;
	    border-radius: 10rpx;
	    padding: 30rpx;
	    margin: 20rpx 10rpx;
	    transform: scale(1);
	    transition: transform 0.3s linear;
	    transform-origin: center center;
	    
	    &--icon {
	      width: 100rpx;
	      height: 100rpx;
	      font-size: 60rpx;
	      border-radius: 50%;
	      margin-bottom: 18rpx;
	      position: relative;
	      z-index: 1;
	      
	      &::after {
	        content: " ";
	        position: absolute;
	        z-index: -1;
	        width: 100%;
	        height: 100%;
	        left: 0;
	        bottom: 0;
	        border-radius: inherit;
	        opacity: 1;
	        transform: scale(1, 1);
	        background-size: 100% 100%;
	        background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
	
	          
	      }
	    }
	  }
	}
	
	/* 阴影 start*/
	.home-shadow {
	  border-radius: 15rpx;
	  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}    
	
	
	/* 自定义导航栏内容 start */
	.custom-nav {
	  height: 100%;
	  
	  &__back {
	    margin: auto 5rpx;
	    font-size: 40rpx;
	    margin-right: 10rpx;
	    margin-left: 30rpx;
	    flex-basis: 5%;
	  }
	  
	  &__search {
	    flex-basis: 60%;
	    width: 100%;
	    height: 100%;
	    
	    &__box {
	      width: 100%;
	      height: 70%;
	      padding: 10rpx 0;
	      margin: 0 30rpx;
	      border-radius: 60rpx 60rpx 0 60rpx;
	      font-size: 24rpx;
	    }
	    
	    &__icon {
	      padding-right: 10rpx;
	      margin-left: 20rpx;
	      font-size: 30rpx;
	    }
	    
	    &__text {
	      // color: #AAAAAA;
	    }
	  }
	}
	.logo-image{
	  z-index: 9999 !important;
	  width: 65rpx;
	  height: 65rpx;
	  position: relative;
	}
	.logo-pic{
	  z-index: 9999 !important;
	  background-size: cover;
	  background-repeat:no-repeat;
	  // background-attachment:fixed;
	  background-position:top;
	  border-radius: 50%;
	}
	/* 自定义导航栏内容 end */
	
	/* 旋转 */
	.png-sussuspension1{
	  animation: suspension1 12s ease-in-out infinite;
	}
	@keyframes suspension1 {
	  0%{
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}
	
	.tabs-fixed{
	  position: fixed;
	  top: 0;
	  width: 100%;
	  transition: all 0.25s ease-out;
	  z-index: 1;
	}
	
	/* 轮播视觉差 start */
	.card-swiper {
	  height: 360rpx !important;
	  margin-top: -30rpx;
	}
	  
	.card-swiper swiper-item {
	  width: 750rpx !important;
	  left: 0rpx;
	  box-sizing: border-box;
	  padding: 30rpx 30rpx 30rpx 30rpx;
	  overflow: initial;
	  // border: 1rpx solid blueviolet;
	}
	  
	.card-swiper swiper-item .swiper-item {
	  width: 100%;
	  display: block;
	  height: 100%;
	  border-radius: 0rpx;
	  transform: scale(0.85);
	  transition: all 0.2s ease-in 0s;
	  will-change: transform;
	  overflow: hidden;
	  border-radius: 10rpx;
	  // border: 1rpx solid blue;
	}
	  
	.card-swiper swiper-item.cur .swiper-item {
	  transform: none;
	  transition: all 0.2s ease-in 0s;
	  will-change: transform;
	}
	  
	.card-swiper swiper-item .swiper-item2 {
	  margin-top: -370rpx;
	  width: 620rpx;
	  display: block;
	  height: 515rpx;
	  border-radius: 0rpx;
	  transform: translate(240rpx, 0rpx) scale(0.45, 0.45);
	  transition: all 0.6s ease 0s;
	  will-change: transform;
	  overflow: hidden;
	  // border: 1rpx solid black;
	}
	  
	.card-swiper swiper-item.cur .swiper-item2 {
	  margin-top: -385rpx;
	  width: 620rpx;
	  transform: translate(210rpx, 0rpx) scale(0.62, 0.62);
	  transition: all 0.6s ease 0s;
	  will-change: transform;
	}
	  
	.card-swiper swiper-item .swiper-item-text {
	  margin-top: -300rpx;
	  width: 100%;
	  display: block;
	  height: 50%;
	  border-radius: 10rpx;
	  transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
	  transition: all 0.6s ease 0s;
	  will-change: transform;
	  overflow: hidden;
	}
	  
	.card-swiper swiper-item.cur .swiper-item-text {
	  margin-top: -350rpx;
	  width: 100%;
	  transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
	  transition: all 0.6s ease 0s;
	  will-change: transform;
	}
	
	/* 简历推荐 start */
	.card-swiper2 {
	  height: 420rpx !important;
	  overflow: hidden;
	}
	  
	.card-swiper2 swiper-item {
	  width: 680rpx !important;
	  left: 30rpx;
	  box-sizing: border-box;
	  overflow: initial;
	  padding: 0 0rpx 40rpx 0;
	}
	  
	.card-swiper2 swiper-item .swiper-item1 {
	  width: 100%;
	  display: block;
	  height: 100%;
	  transform: scale(0.97);
	  transition: all 0.2s ease-in 0s;
	  will-change: transform;
	  background-color: #E7FAFE;
	}
	  
	.card-swiper2 swiper-item.cur .swiper-item1 {
	  transform: none;
	  transition: all 0.2s ease-in 0s;
	  will-change: transform;
	}
	
	.card-swiper2 swiper-item .swiper-item2 {
	  margin-top: -180rpx;
	  width: 100%;
	  display: block;
	  height: 50%;
	  border-radius: 50%;
	  transform: translate(510rpx, -160rpx) scale(0.9, 0.9);
	  transition: all 0.3s ease 0s;
	  will-change: transform;
	}
	  
	.card-swiper2 swiper-item.cur .swiper-item2 {
	  margin-top: -180rpx;
	  width: 100%;
	  transform: translate(510rpx, -150rpx) scale(0.9, 0.9);
	  transition: all 0.3s ease 0s;
	  will-change: transform;
	}
	
	.card-swiper2 swiper-item .swiper-item-text {
	  margin-top: -270rpx;
	  width: 100%;
	  display: block;
	  height: 100%;
	  border-radius: 10rpx;
	  transform: translate(30rpx, -20rpx) scale(0.8, 0.8);
	  transition: all 0.6s ease 0s;
	  will-change: transform;
	  overflow: hidden;
	}
	  
	.card-swiper2 swiper-item.cur .swiper-item-text {
	  margin-top: -270rpx;
	  width: 100%;
	  transform: translate(20rpx, 0rpx) scale(0.9, 0.9);
	  transition: all 0.6s ease 0s;
	  will-change: transform;
	}
	
	.image-banner{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.image-banner image{
	  width: 100%;
	}
	
	/* 轮播指示点 start*/
	.indication{
	  z-index: 0;
	  width: 100%;
	  height: 36rpx;
	  position: absolute;
	  display:flex;
	  flex-direction:row;
	  align-items:center;
	  justify-content:center;
	  // border: 1rpx solid orangered;
	}
	
	.spot{
	  // background-color: #FBBD12;
	  top: -80rpx;
	  opacity: 0.1;
	  width: 30rpx;
	  height: 8rpx;
	  border-radius: 2rpx;
	  margin: 0 6rpx !important;
	  left: -238rpx;
	  position: relative;
	}
	
	.spot.active{
	  opacity: 1;
	  width: 30rpx;
	  // background-color: #FBBD12;
	}
	
	/* 资讯主图 start*/
	.image-article {
	  border-radius: 8rpx;
	  width: 200rpx;
	  height: 200rpx;
	  position: relative;
	}
	
	.article-shadow {
	  border-radius: 15rpx;
	  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}
	
	/* 文字截取*/
	.clamp-text-1 {
	  -webkit-line-clamp: 1;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}
	
	.clamp-text-2 {
	  -webkit-line-clamp: 2;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}
	
	/* 标签内容 start*/
	.tn-tag-content {
	  &__item {
	    display: inline-block;
	    line-height: 35rpx;
	    color: #1D2541;
	    background-color: #F3F2F7;
	    border-radius: 10rpx;
	    font-size: 22rpx;
	    padding: 5rpx 15rpx;
	
	    &--prefix {
	      padding-right: 10rpx;
	    }
	  }
	}
	
	
	/* 大单图 start*/
	.tn-blogger-content2 {
	  &__wrap {
	    padding: 30rpx;
	  }
	  
	  &__info {
	    &__btn {
	      margin-right: -12rpx;
	      opacity: 0.5;
	    }
	  }
	  
	  &__label {
	    &__item {
	      line-height: 45rpx;
	      padding: 0 20rpx;
	      margin: 5rpx 18rpx 0 0;
	      
	      &--prefix {
	        color: #00FFC8;
	        padding-right: 10rpx;
	      }
	    }
	    
	    &__desc {
	      line-height: 55rpx;
	    }
	  }
	  
	  &__main-image {
	    box-shadow: 0rpx 5rpx 40rpx 0rpx rgba(43, 158, 246, 0.2);
	    border-radius: 16rpx;
	    
	    &--1 {
	      max-width: 690rpx;
	      min-width: 690rpx;
	      max-height: 400rpx;
	      min-height: 400rpx;
	    }
	    
	    &--2 {
	      max-width: 260rpx;
	      max-height: 260rpx;
	    }
	    
	    &--3 {
	      height: 212rpx;
	      width: 100%;
	    }
	  }
	  
	  &__count-icon {
	    font-size: 40rpx;
	    padding-right: 5rpx;
	  }
	}
	
	.image-tuniao1{
	  padding: 165rpx 0rpx;
	  font-size: 40rpx;
	  font-weight: 300;
	  position: relative;
	}
	.image-tuniao2{
	  padding: 75rpx 0rpx;
	  font-size: 40rpx;
	  font-weight: 300;
	  position: relative;
	}
	.image-tuniao3{
	  padding: 90rpx 0rpx;
	  font-size: 40rpx;
	  font-weight: 300;
	  position: relative;
	}
	
	.image-design{
	  padding: 160rpx 0rpx;
	  font-size: 40rpx;
	  font-weight: 300;
	  position: relative;
	}
	.image-pic{
	  background-size: cover;
	  background-repeat:no-repeat;
	  // background-attachment:fixed;
	  background-position:top;
	  border-radius: 10rpx;
	}
	
	/* 胶囊banner*/
	.image-capsule{
	  padding: 100rpx 0rpx;
	  font-size: 40rpx;
	  font-weight: 300;
	  position: relative;
	}
	
	.image-piccapsule{
	  background-size: cover;
	  background-repeat:no-repeat;
	  // background-attachment:fixed;
	  background-position:top;
	  border-radius: 20rpx 20rpx 0 0;
	}
</style>